<template>
	<view class="container" v-if="orderInfo">
		<view class="nav-bg">
			<u-navbar :background="background" title-size="34"  back-icon-color="#343A40"  :border-bottom="false" 
			:custom-back="goBack" placeholder>
			</u-navbar>
			<view class="alert-tips">
				<u-alert-tips :show-icon="true"  type="warning" :title="title" ></u-alert-tips>
			</view>
			<view class="d-flex justify-content-center align-items-center state-wrap">
				<view class="wait-icon">
					<image src="/static/mine/countdown.png"></image>
				</view>
				<view class="text-292940 fz-44">等待付款</view>
			</view>
			<view class="d-flex justify-content-center align-items-center count-down-padding">
				<view class="text-999BA8 fz-30">剩余</view>
				<u-count-down  :hide-zero-day="true" :timestamp="timestamp" font-size="30" separator-size="30"
				 separator-color="#999BA8" color="#999BA8" bg-color="rgba(255,255,255,0)" height="36"
				 :show-days="false" :show-hours="false" separator="zh" @end="timeEnd"></u-count-down>
			</view>
			<view class="d-flex justify-content-center align-items-center text-292940">
				<view class="d-flex align-items-end">
					<span class="fz-36 font-DIN">￥</span><span class="fz-48 font-DIN">{{orderInfo.amount}}</span>
				</view>
			</view>
		</view>
		<view class="order-wrap">
			<view class="order-info" @click="toDetail">
				<view class="text-999BA8 fz-22 order-number">订单编号: {{orderInfo.order_no}}</view>
				<view class="d-flex position-relative">
					<view class="order-img">
						<template v-if="orderInfo.blind_box_id != 0">
							<image :src="orderInfo.box.cover_url" mode="aspectFill"></image>
						</template>
						<template v-else>
							<image :src="orderInfo.works.file" mode="aspectFill" v-if="orderInfo.works.type == 1"></image>
							<image :src="orderInfo.works.cover" mode="aspectFill" v-else></image>
						</template>
					</view>
					<view class="order-right position-relative d-flex justify-content-between align-items-center">
						<view class="order-name" v-if="orderInfo.blind_box_id != 0">{{orderInfo.box.name}}</view>
						<view class="order-name" v-else>{{orderInfo.works.name}}#{{orderInfo.market.no}}</view>
						<view class="order-amount">
							<view class="amount">
								<span class="fz-30">￥</span>
								<span class="fz-40 font-DIN">{{orderInfo.price}}</span>
							</view>
							<view class="count">
								x{{orderInfo.count}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-tottom" v-if="walletList.length > 0">
			<view class="text-666978 fz-26">支付方式</view>
			<view class="radio-wrap card-shadow" >
				<view class="d-flex align-items-center radio-list" v-for="(item ,index) in walletList">
					<view class="radio-logo">
						<image src="/static/mine/wallet-huifu.png" mode="aspectFill"></image>
					</view>
					<view class="d-flex justify-content-between align-items-center radio-list-right"
						:class="{'border-none': index == walletList.length-1}">
						<view class="text-292940 fz-32">汇付钱包</view>
						<view class="radio-icon" @tap="check(index)">
							<image src="/static/mine/paychoose-sel.png"></image>
						</view>
					</view>
				</view>
			</view>
			<template v-if="walletList.length > 0">
			<view class="d-flex justify-content-between" v-if="timestamp > 0">
				<u-button hover-class="none" class="cancel-btn-style fz-36 text-center" @click="cancelShow = true">取消</u-button>
				<u-button @click="orderPay" :loading="loading" hover-class="none" class="pay-btn-style yellow-bg text-ffffff fz-36 text-center" >支付</u-button>
			</view>
				<u-button class="btn-off fz-30 text-center pay-btn" disabled v-else>支付超时</u-button>
			</template>
			<template v-else>
				<u-button @click="toWallet" hover-class="none" class="pay-btn yellow-bg text-ffffff fz-36 text-center">开通钱包</u-button>
			</template>
		</view>
		<u-popup v-model="walletShow" mode="center" border-radius="16" >
			<view class="album-box">
				<view class="wallet-popup-bg">
					<view class="order-wait-tip-padding d-flex justify-content-center align-items-center">
						<view class="order-wait-tip">
							<image src='/static/mine/order-wait-tip.png'></image>
						</view>
						<view class="title text-292940 fz-36 text-center font-weight-600">交易已取消</view>
					</view>
					
					<view class="text-292940 fz-30 text-center">取消原因：订单超时未支付</view>
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<u-button type="text" class="text-666978 fz-36  btn-style" @click="toMarket">返回市场</u-button>
						<u-button type="text" class="text-ffffff fz-36  btn-style yellow-bg" @click="againDetail">再次购买</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="cancelShow" mode="center" border-radius="16" >
			<view class="album-box">
				<view class="wallet-popup-bg cancel-bg">
					<view class="cancel-padding text-292940 fz-36 text-center font-weight-600">
						订单取消
					</view>
					<view class="text-292940 fz-30 text-center">订单取消三次账户将被锁定,次日凌晨恢复</view>
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<u-button type="text" class="text-666978 fz-36  btn-style" @click="cancelShow = false">暂不取消</u-button>
						<u-button type="text" :loading="cancelLoading" class="text-ffffff fz-36  btn-style yellow-bg" @click="orderCancel">确定取消</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bgHeight:204,
				background:{ background:'rgba(255,255,255,0)' },
				order_id:'',
				created_at:'',
				name:'',
				no:'',
				file:'',
				token_id:'',
				timestamp:0,
				loading:false,
				cancelLoading:false,
				value: '',
				route:'',
				activity_id:'',
				word_id:'',
				count:1,
				cover:'',
				macAddress:'',//MAC地址
				isSearchStatus:false,//是否查询订单状态
				callBackUrl:'',//H5支付，获取当前页面地址参数
				orderInfo:null,
				isSerach:'',
				title:'三次下单未付款,账户将被锁定,次日0时恢复',
				walletShow:false,
				cancelShow:false
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.isSerach = options.isSerach || ''
			if(options.activity_id){
				this.activity_id = options.activity_id 
			}
			this.getOrderShow()
			// #ifdef APP-PLUS
			this.macAddress = this.tui.getDeviceMac()
			// #endif
			// #ifdef H5
			this.macAddress = this.tui.generateMixed(12)
			this.callBackUrl = `${this.$BASE_PATH}/#/pages/secondary/mine/order-wait?order_id=${this.order_id}&isSerach=1&activity_id=${this.activity_id}`
			if(this.isSerach == 1){
				this.getOrderStatus()
			}
			// #endif
			this.$store.commit('wallet/SET_ISREFRESHWAITCOUNT',true)
		},
		onShow() {
			// #ifdef APP-PLUS
			if(this.isSearchStatus){
				//查询订单状态
				this.getOrderStatus()
			}
			// #endif
		},
		computed:{
			//钱包列表
			walletList(){
				return this.$store.state.wallet.walletList
			}
		},
		methods:{
			//返回市场
			toMarket(){
				uni.switchTab({
					url:'/pages/tabBars/market'
				})
			},
			//再次购买
			againDetail(){
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${this.orderInfo.work_id}`
				})
			},
			//取消订单
			orderCancel(){
				this.cancelLoading = true
				this.$store.dispatch('wallet/orderCancel',{order_id:this.order_id}).then(res=>{
					this.cancelLoading = false
					this.cancelShow = false
					this.$store.commit('works/SET_ISREFRESHORDER',true)
					this.getOrder()
					this.tui.goBack()
				}).catch(error=>{
					this.cancelLoading = false
					this.cancelShow = false
				})
			},
			//获取订单详情
			getOrderShow(){
				this.$store.dispatch('wallet/orderShow',{order_id:this.order_id}).then(res=>{
					this.orderInfo = res.data
					let nowTime = parseInt(new Date().getTime() / 1000)
					let endTime = ''
					if(uni.getSystemInfoSync().platform == 'ios'){
						endTime = (new Date(this.orderInfo.created_at.replace(/-/g, '/')).getTime() / 1000 + 180)
					}else{
						endTime = (new Date(this.orderInfo.created_at).getTime() / 1000) + 180
					}
					if(nowTime - endTime >= 0){
						this.timestamp = 0//过期了
						this.walletShow = true
					}else{
						this.timestamp =  endTime - nowTime
					}
				})
			},
			toWallet(){
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			//查询订单状态
			getOrderStatus(){
				this.loading = true
				uni.showLoading({
					mask: true,
					title: '支付查询中...',
				})
				this.$store.commit('wallet/SET_ISREFRESHWAITCOUNT',true)
				setTimeout(()=>{
					this.$store.dispatch('wallet/orderShow',{order_id:this.order_id}).then(res=>{
						if(res.data.status >= 2){
							let work_id = this.orderInfo.blind_box_id != 0 ? this.orderInfo.box.id : this.orderInfo.works.id
							setTimeout(()=>{
								uni.navigateTo({
									url:`/pages/secondary/market/pay-success?activity_id=${this.activity_id}&work_id=${work_id}&blind_box_id=${res.data.blind_box_id}`
								})
							},100)
						}else {
							uni.$u.toast('支付失败~')
						}
						this.loading = false
						this.isSearchStatus = false
						uni.hideLoading()
					}).catch(error=>{
						this.loading = false
						this.isSearchStatus = false
						uni.hideLoading()
					})
				},1000)
			},
			//商品详情
			toDetail(){
				if(this.orderInfo.blind_box_id != 0){
					uni.navigateTo({
						url:`/pages/secondary/market/Blind-box?box_id=${this.orderInfo.box.id}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/secondary/market/index?work_id=${this.orderInfo.works.id}`
					})
				}
			},
			timeEnd(){
				this.timestamp = 0
				this.walletShow = true
				this.getOrder()
			},
			goBack(){
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url:'/pages/secondary/mine/order-list?current=1'
					})
				}
			},
			//获取待支付订单
			getOrder(){
				this.$store.dispatch('wallet/order',{status:1}).then(res=>{})
			},
			//支付
			orderPay(){
				this.loading = true
				uni.showLoading({
					mask: true,
					title: '支付中...',
				})
				let param = {
					order_id:this.order_id,
					return_url:this.callBackUrl,
					type:1,
					mac:this.macAddress
				}
				this.isSearchStatus = true
				this.$store.dispatch('wallet/orderPay',param).then(res=>{
					this.loading = false
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/secondary/mine/openPay?url=${res.data}`
					})
					// #endif
					// #ifdef H5
					window.location.href = res.data
					// #endif
				}).catch(error=>{
					this.loading = false
					uni.hideLoading()
					if(error.data.code == 302){
						//查询支付状态
						this.getOrderShow()
					}
				})
			},
			check(index){
				for (let i in this.walletList) {
					this.walletList[i].checked = false
				}
				this.walletList[index].checked = !this.walletList[index].checked
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{ 
		width: 100%;
		height: 100vh;
		background: url('/static/mine/order-bg.png') no-repeat;
		background-size: 100% 40%;
	}
	.alert-tips{
		width: 100%;
		padding: 10upx 30upx 0;
		box-sizing: border-box;
		/deep/.u-alert-tips--border--warning-disabled{
			border-color: rgba(000,000,000,0);
		}
		/deep/.u-icon__icon--warning{
			color:#FA541B;
		}
		/deep/.u-alert-title{
			color:#FA541B;
		}
		/deep/.u-alert-tips--bg--warning-light{
				background:rgba(250, 84, 27, 0.04)
			}
	
	}
	.nav-bg{
		width:100%;
		// background: linear-gradient(178deg, #F5FFFF 0%, #FFFFFF 100%);
		// box-shadow: 0px 10px 20px 0px rgba(154,166,219,0.1);
		padding-bottom: 96upx;
		.state-wrap{
			padding: 36upx 0 0 0;
			/deep/.u-countdown-colon{
				line-height: 1em;
				font-size: 23upx;
				padding-bottom: 6upx !important;
			}
		}
		.wait-icon {
			height: 44upx;
			width: 44upx;
			margin-right: 10upx;
			image {
				width: 44upx;
				height: 44upx;
			}
		}
		.count-down-padding{
			margin-top: 23upx;
			margin-bottom: 16upx;
		}
		.pay-btn{
		//	margin-top: 26upx;
			width: 300upx;
			height: 72upx;
			background: #292940;
			border-radius:36upx;
			line-height:72upx;
			margin:26upx auto 0;
		}
		.btn-off{
			width: 300upx;
			height: 72upx;
			background: #e7e8eb;
			color: #666978;
			border-radius:36upx;
			line-height:72upx;
			margin:26upx auto 0;
		}
	}
	.order-wrap{
		padding: 0 24upx;
		margin-top: -36upx;
	}
	.order-info{
		width: 100%;
		//height: 240upx;
		background: #FFFFFF;
		box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
		border-radius: 10upx;
		padding: 30upx 28upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		.order-number{
			margin-bottom: 16upx;
		}
		.order-img{
			width: 180upx;
			height: 180upx;
			border-radius: 8upx;
			margin-right: 18upx;
			image{
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
			}
		}
		.order-right{
			padding-top: 11upx;
			box-sizing: border-box;
			height: 180upx;
			width: 100%;
			.order-name{
				width: 57%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				//溢出内容隐藏
				text-overflow: ellipsis;		//文本溢出部分用省略号表示
				display: -webkit-box;			//特别显示模式
				-webkit-line-clamp: 2;			//行数
				line-clamp: 2;					
				-webkit-box-orient: vertical;	//盒子中内容竖直排列
				word-wrap:break-word;
				word-break:break-all;
			}
			.order-amount{
				width: 41%;
				text-align: right;
				.amount{
					color: #2E2E4AFF;
				}
				.count{
					font-size: 28upx;
					color: #999BA8FF;
				}
			}
			.name-460{
				width: 460upx;
			}
			.order-price{
				bottom: 50upx;
			}
		}
		
	}
	.transaction-info{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
		border-radius: 10upx;
		padding: 0 30upx;
		box-sizing: border-box;
		.transaction-list{
			width:100%;
			height: 84upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
			image{
				width: 28upx;
				height: 28upx;
				margin-left:10upx;
			}
			.padding-r{
				padding-right:35upx;
			}
		}
		.transaction-list:nth-last-of-type(1){
			border-bottom: none;
		}
	}
	.pay-tottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		padding:0 30upx 40upx;
		.radio-wrap{
			width: 100%;
			background: #FFFFFF;
			border-radius: 10upx;
			margin-top: 20upx;
			margin-bottom: 62upx;
			.radio-list{
				padding: 0 30upx 0 30upx;
				box-sizing: border-box;
				height: 128upx;
				.radio-logo{
					width: 44upx;
					height: 44upx;
					background: linear-gradient(134deg, rgba(122, 96, 255, 0.11) 0%, rgba(30, 247, 254, 0.11) 100%);
					border-radius: 50%;
					margin-right: 14upx;
					box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.4), 0px 4upx 12upx -6upx rgba(154,166,219,0.3);
					image{
						width: 44upx;
						height: 44upx;
						border-radius: 50%;
					}
				}
				.radio-list-right{
					height: 128upx;
					border-bottom: 1upx solid rgba(216, 222, 228, .8);
					flex:1;
					.radio-icon{
						width: 44upx;
						height: 44upx;
						image{
							width: 44upx;
							height: 44upx;
						}
					}
				}
			
				.border-none {
					border-bottom: none;
				}
				
			}
		
			
		}
		
		.cancel-btn-style{
			width: 228upx;
			height: 98upx;
			line-height: 98upx;
			border-radius: 49upx;
			background: #D8D9E1;
			margin-right: 0 !important;
			margin-left: 0 !important;
		}
		
		.pay-btn-style{
			width: 426upx;
			height: 98upx;
			line-height: 98upx;
			border-radius: 49upx;
			margin-right: 0 !important;
			margin-left: 0 !important;
		}
		.pay-btn{
			width: 100%;
			height: 98upx;
			line-height: 98upx;
			border-radius: 49upx;
		}
		.radio-item{
			width: 100%;
			
		}
	}
	.album-box {
		height: 400upx;
		width: 640upx;
		.wallet-popup-logo{
			width: 98upx;
			height: 98upx;
			margin:0 auto 0;
			image{
				width: 98upx;
				height: 98upx;
				vertical-align: top;
			}
		}
		.wallet-popup-bg{
			width: 640upx;
			height: 400upx;
			border-radius: 16upx;
			background: url(/static/mine/wallet-popup-bg.png) no-repeat;
			background-size: 100% 100%;
			.order-wait-tip-padding{
				padding-top: 77upx;
				margin-bottom: 30upx;
			}
			.order-wait-tip{
				width: 64upx;
				height: 64upx;
				margin-right: 20upx;
				image{
					width: 64upx;
					height: 64upx;
					vertical-align: top;
				}
			}
			.cancel-padding{
				padding-top: 56upx;
				margin-bottom: 40upx;
			}
			.popup-btn-box {
				padding: 0 40upx;
				box-sizing: border-box;
				margin-top: 59upx;
				.btn-style {
					width: 268upx;
					height: 88upx;
					background: rgba(216,217,225,0.5);
					border-radius: 49upx;
					margin-left:0 !important;
					margin-right:0 !important;
				}
			}
			
		}
		.cancel-bg{
			background: #ffffff !important;
		}
	
		
	}
</style>